<script setup>
import { reactive } from 'vue'

const tableCols = [
  // {
  //   key: '',
  //   label: '最近登录时间'
  // },
  {
    key: 'logger_msg',
    label: '日志描述'
  },
  {
    key: 'create_time',
    label: '操作时间',
    width: '200px'
  }
]
const listState = reactive({
  page: 1,
  pageSize: 20,
  list: [],
  total: 0
})
async function getList() {
  const res = await window.api.getLogger(listState.pageSize, listState.page - 1)
  listState.list = res.rows
  listState.total = res.total
}
getList()
function changePageNo(page) {
  listState.page = page
  getList()
}
</script>

<template>
  <div>
    <div class="table-wrap">
      <el-table :data="listState.list" style="width: 100%" border @sort-change="handleTableSort">
        <el-table-column
          v-for="item in tableCols"
          :key="item.key"
          :prop="item.key"
          :label="item.label"
          align="center"
          :width="item.width"
          :sortable="item.sort ? 'custom' : false"
        >
        </el-table-column>
        <template #empty>
          <div class="table-no-data">
            <img src="@renderer/assets/img/empty-data.png" />
            <span>暂无数据</span>
          </div>
        </template>
      </el-table>
      <mPage
        :page-size="listState.pageSize"
        :page_no="listState.page"
        style="display: flex; justify-content: flex-end; margin-top: 20px"
        :total="listState.total"
        @handle-current-change="changePageNo"
      />
    </div>
  </div>
</template>
